Day26 把前後端串起來了，但到這一步之前，整個專案還是只有自己的電腦看得到畫面，本機能跑，不等於別人打得開。為了讓所有人都可以拿著一個網址直接使用，就得將產品「上線」。

🧱 先看大方向：上線到底在做什麼？

我們平常在自己電腦上看專案，是因為有一個開發用的小伺服器（npm run dev）在背景幫忙。關掉電腦，或者換一台電腦，這個網頁就消失了。

「上線」的意思，就是把網頁需要的檔案，放到一個 24 小時開著、全世界都連得到的地方。就像開店：在家裡擺攤只有家人看得到，要租一間店面、掛上招牌（網址），客人才找得到。

這次我選的「店面」是 AWS 的 S3 加 CloudFront。下面一步一步說明它們各是什麼。

🧱 地基概念

1. 前端打包之後，其實只是一堆檔案

執行 npm run build 之後，專案會產出一個 dist 資料夾，裡面只有 HTML、JavaScript、CSS 這幾種檔案。這些檔案不需要「執行」，瀏覽器下載之後自己就會顯示畫面。

所以我們不需要租一台伺服器，只要找一個「能讓人下載檔案」的地方就夠了。這種做法叫做靜態網站 hosting。

2. S3：放檔案的倉庫

S3 是 AWS 的檔案儲存服務。你可以把它想像成一個雲端硬碟，裡面的資料夾叫做 bucket。我們把 dist 裡的檔案全部上傳到這個 bucket 裡。

3. CloudFront：負責送貨的櫃檯

如果只有倉庫，每個人都要直接跑到倉庫拿東西，不但慢（倉庫在日本東京，歐洲的人要等比較久），也不安全。CloudFront 就像是在世界各地設立的取貨櫃檯：

• 它會把檔案複製一份放到各地的節點，使用者就近拿，速度比較快（這個機制叫 CDN）
• 它會提供一個正式的 HTTPS 網址，瀏覽器網址列會有小鎖頭，使用者比較放心

4. 為什麼倉庫（bucket）不直接對外公開？

最簡單的做法，是把 bucket 設成「公開讀取」，任何人都能直接打開檔案。但這樣倉庫的門完全沒鎖，什麼人都能進出，不是好習慣。

這次我用的是 AWS 現在建議的做法：Origin Access Control（OAC）。白話來說：

• 倉庫（bucket）的門是鎖起來的，不對一般大眾開放
• 只發一把鑰匙給 CloudFront，只有它能進去拿檔案
• 使用者永遠只跟 CloudFront 說話，碰不到倉庫

這跟 Day12 講的「最小權限」是同一個概念：只開放必要的人，其他人一律不給。

🔧 實際操作

第一步：用 template.yaml 把雲端資源「寫」出來

還記得前面幾篇用 SAM 建立 Lambda 嗎？這次一樣，在 template.yaml 多加了三個資源，用程式碼描述我想要什麼，讓 AWS 照著建：

用程式碼描述基礎設施，有一個好處：如果哪天要刪掉重建，不用重新點很多次滑鼠，重跑一次指令就好。

第二步：三個指令完成部署

1. sam build && sam deploy：建立雲端資源。這一步做完，倉庫跟櫃檯就蓋好了，但裡面還是空的
2. npm run build：把前端打包成 dist 資料夾
3. aws s3 sync frontend/dist s3://bucket名稱 --delete：把檔案上傳到倉庫。sync 的意思是「讓倉庫的內容跟本機一樣」；加上 --delete，本機已經刪掉的舊檔案，倉庫裡也會跟著清掉，不會殘留過期的東西

順序不能顛倒：要先有倉庫（步驟 1），才有地方放檔案（步驟 3）。

做完之後，AWS 會給一個 https://xxxx.cloudfront.net 的公開網址，這就是可以分享出去的網站。

第三步：在正式網址上完整跑一次

我用 Claude in Chrome 打開正式網址，填表單、按下按鈕，確認 RMR、TDEE 都有正確顯示。這一步很重要，因為本機能動，不代表上線後也能動，要確認連到後端（CORS）跟呼叫 Bedrock 在正式網址下也正常。

🙋 新手可能會有的疑問

Q：CloudFront 跟前面提到的「看 log」是同一個東西嗎？

不是，名字很像但完全不同。前面幾篇用來查 Lambda 執行紀錄、debug 的是 CloudWatch（Watch＝看，負責看紀錄跟監控）。這篇的 CloudFront（Front＝最前面）是站在最前面、把網頁送給使用者的 CDN。可以這樣記：CloudWatch 是「監控室」，CloudFront 是「取貨櫃檯」。

Q：為什麼不直接把檔案丟到一台虛擬主機？

可以，但前端打包完只是靜態檔案，用 S3 加 CloudFront 不需要自己管伺服器、不用擔心當機，費用也是用多少算多少，比較適合這種小專案。

Q：後端 API 也要經過 CloudFront 嗎？

不用。前端網頁走 CloudFront；按下按鈕之後，前端是直接呼叫 Day26 設定好的 API Gateway。兩者是分開的。

Q：網址很長很醜，可以換嗎？

可以，需要另外買網域再設定，這次先不做，目的是先讓人打得開。

小結

上線的關鍵不是「把檔案丟上去」，而是丟上去的方式要安全：倉庫不公開，只讓 CloudFront 一個人進去拿，使用者永遠只跟 CloudFront 說話。

有了公開網址，緊接著冒出一個問題：如果真的有人狂點，我要付多少錢？Day28 來聊聊這件事。